<template>
	<view class="container">
		<view class="user-top" v-if="userInfo && userInfo.id">
			<view class="" @click="setInfo">
				<view class="img">
					<image :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
					<image src="/static/image@2x.png" mode="aspectFill" v-else></image>
				</view>
				<view class="name" v-if="userInfo.nickname">
					{{ userInfo.nickname }}
				</view>
				<button class="name" open-type="getUserInfo" @getuserinfo="login" v-else>授权登录</button>
			</view>
			<view class="tel" v-if="userInfo.phone">
				{{ userInfo.phone }}
			</view>
			<!-- 	<button open-type="getPhoneNumber" class="tel" @bindgetphonenumber="getPhoneNumberHandler"
				v-else>绑定手机号</button> -->
		</view>
		<view class="user-middle">
			<image src="/static/ubcg.png" mode=""></image>
			<view class="i" @click="$pageTo(`/pages/user/money`)">
				<view class="btn">充值</view>
				<view class="m">
					<text style="font-family: 'DINB'">{{ userInfo.coin || 0 }}</text>
					<text class="t1">商人币</text>
				</view>
				<view class="texst">可用于解锁信息</view>
			</view>
		</view>
		<view class="user-list">
			<view v-if="verifyUp == 0" class="item u-flex u-col-center u-row-between" @click="$pageTo(`/pages/user/order/orderList`)">
				<view class="l u-flex u-col-center">
					<image src="/static/u2.png" mode="aspectFill"></image>
					<text>报价管理</text>
				</view>
				<view class="r flex">
					<view class="r_num" v-if="singdata.quotationCount !='0'">
						{{singdata.quotationCount}}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view v-if="verifyUp == 0" class="item u-flex u-col-center u-row-between" @click="$pageTo(`/pages/user/myorder`)">
				<view class="l u-flex u-col-center">
					<image src="/static/u1.png" mode="aspectFill"></image>
					<text>我的出价</text>
				</view>
				<view class="r flex">
					<view class="r_num" v-if="singdata.buyerCount != '0'">
						{{ singdata.buyerCount }}
					</view>
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view v-if="verifyUp == 0" class="item u-flex u-col-center u-row-between" @click="$pageTo(`/pages/user/addressList?types=user`)">
				<view class="l u-flex u-col-center">
					<image src="/static/u3.png" mode="aspectFill"></image>
					<text>我的联系信息</text>
				</view>
				<view class="r">
					<uni-icons type="right"></uni-icons>
				</view>
			</view>
			<view class="item u-flex u-col-center u-row-between">
				<view class="l u-flex u-col-center">
					<image src="/static/u5.png" mode="aspectFill"></image>
					<text>联系客服</text>
				</view>
				<!-- <button class='btns' open-type="contact"></button> -->
				<button class="btns" open-type="privateMessage" data-aweme-id="MHXY_XiaoHaiWang"></button>
			</view>
		</view>
		<view class="f-btn" @click="release" v-if="verifyUp == 0">发布报价</view>
		<uni-popup ref="popupshow2" type="center">
			<view class="m-pop2">
				<view class="t">商人币不足，请充值（发布报价需消耗{{ coin }}个商人币/天）</view>
				<view class="btns u-flex u-col-center u-row-between">
					<view class="btn btn1" @click="close2">暂不</view>
					<view class="btn btn2" @click="$pageTo(`/pages/user/money`)">去充值</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupUser" type="bottom" @change="ischage" :safe-area="false">
			<view class="m-pop3">
				<view class="u-title">修改用户信息</view>
				<view class="u-list">
					<view class="avatar" @click="upload">
						<image :src="avatarL" mode="aspectFill" class="img" v-if="avatarL"></image>
						<image src="@/static/image@2x.png" mode="aspectFill" class="img" v-else></image>
						<image src="@/static/up1.png" mode="aspectFill" class="up"></image>
					</view>
					<view class="item u-flex u-col-center u-row-between">
						<view class="l">昵称</view>
						<view class="r">
							<input type="text" v-model="nickname" placeholder="请输入昵称" placeholder-class="pclass" />
						</view>
					</view>
					<!-- 	<view class="item u-flex u-col-center u-row-between">
						<view class="l">
							手机号
						</view>
						<view class="r">
							<input type="number" v-model="userInfo.phone" placeholder="请输入手机号"
								placeholder-class="pclass" />
						</view>
					</view> -->
				</view>
				<view class="u-btn" @click="userSubmit">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getUserinfo, webconfig, messageSeecount, login, bondRecharge, editUserinfo,usersTips} from '@/common/http.api.js';
export default {
	data() {
		return {
			// 个人信息
			userInfo: {
				id: '',
				avatar: '',
				bond: 0,
				coin: 0,
				datafrom: 1,
				dyopenid: '',
				nickname: '',
				phone: '',
				type: 2,
				wxopenid: ''
			},
			nickname: '',
			avatarL: '',
			verifyUp: 0,
			coin: 0,
			singdata:{}
		};
	},
	onShow() {
		if (uni.getStorageSync('userToken')) {
			this.getwebconfig();
			this.getSeeCount();
			this.getUser();
			this.gettip()
		} else {
			this.login();
		}
	},
	computed: {
		getBond() {
			return (a, b) => {
				return a - b;
			};
		}
	},
	methods: {
		gettip(){
			usersTips().then(res=>{
				if(res.code == 200){
					this.singdata = res.data
				}
			})
		},
		ischage(e) {
			if (e.show) {
				uni.hideTabBar();
			} else {
				setTimeout(() => {
					uni.showTabBar();
				}, 500);
			}
		},
		setInfo() {
			this.$refs.popupUser.open();
		},
		release() {
			if (this.userInfo.coin < this.coin) {
				this.$refs.popupshow2.open();
			} else {
				uni.navigateTo({
					url: '/pages/user/release'
				});
			}
		},
		close2() {
			this.$refs.popupshow2.close();
		},
		getUser() {
			getUserinfo({}).then((res) => {
				if (res.code == 200) {
					this.userInfo = res.data;
					this.avatarL = res.data.avatar;
					this.nickname = res.data.nickname;
				}
			});
		},
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.verifyUp = res.data.verifyUp;
					this.coin = res.data.coin;
					uni.setStorageSync('webconfig', res.data);
				}
			});
		},
		getSeeCount() {
			messageSeecount({}).then((res) => {
				if (res.code == 200) {
					let num = res.data;
					if (num > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: '新'
						});
					} else {
						uni.removeTabBarBadge({
							index: 1
						});
					}
				}
			});
		},
		login() {
			// #ifdef MP-TOUTIAO
			tt.login({
				force: true,
				success: (r) => {
					login({
						code: r.code
					}).then((res) => {
						if (res.code == 200) {
							uni.setStorageSync('openId', res.data.openId);
							uni.setStorageSync('userToken', res.data.token);
							uni.setStorageSync('loginTime', new Date().getTime());
							this.getUser();
						}
					});
				},
				fail(res) {
					console.log(`login 调用失败`);
				}
			});
			// #endif
		},
		upload() {
			this.$uploadone().then((res) => {
				this.avatarL = res;
			});
		},
		userSubmit() {
			editUserinfo({
				avatar: this.avatarL,
				nickname: this.nickname
			}).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					});
					this.$refs.popupUser.close();
					this.getUser();
				}
			});
		},
		getPhoneNumberHandler(e) {
			console.log(e.detail.errMsg);
			console.log(e.detail.iv);
			console.log(e.detail.encryptedData);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 60rpx 30rpx 0rpx 30rpx;

	.m-pop3 {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 30rpx;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 700rpx;

		.u-title {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
		}

		.u-btn {
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #fff;
			text-align: center;
		}

		.u-list {
			.avatar {
				width: 200rpx;
				height: 200rpx;
				margin: 30rpx auto;
				position: relative;

				.img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 2rpx solid #ff6f07;
					box-sizing: border-box;
				}

				.up {
					position: absolute;
					bottom: 0;
					right: 20rpx;
					width: 50rpx;
					height: 50rpx;
					background-color: #fff;
					border-radius: 50%;
					z-index: 999;
				}
			}

			.item {
				padding: 30rpx 0;
				border-bottom: 2rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.l {
					font-size: 26rpx;
					color: #666;
					width: 200rpx;
				}

				.r {
					flex: 1;
					width: 1rpx;
					text-align: right;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					input {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}

	.m-pop2 {
		width: 620rpx;
		height: 340rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		box-sizing: border-box;
		padding: 60rpx 40rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;

		.t {
			line-height: 44rpx;
			height: 44rpx;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns {
			width: 100%;
			margin-top: 50rpx;

			.btn {
				text-align: center;
				font-size: 32rpx;
				width: calc(50% - 10rpx);
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
			}

			.btn1 {
				background: #f9f9f9;
				color: #d1cdcd;
			}

			.btn2 {
				color: #fff;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			}
		}
	}

	.f-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 600;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		border-radius: 20rpx;
		text-align: center;
	}

	.user-list {
		margin-top: 20rpx;

		.item {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 30rpx 15rpx;
			position: relative;

			.btns {
				top: 0%;
				left: 0%;
				position: absolute;
				width: 100%;
				height: 90rpx;
				opacity: 0.1;
			}

			.l {
				height: 40rpx;
				line-height: 40rpx;
				flex: 1;
				width: 1rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #11192d;
					text-align: left;
				}
			}

			.r {
				.r_num{
					height: 32rpx;
					background: #FE1515;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 0rpx 16rpx;
					font-family: Inter, Inter;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 32rpx;
					margin-right: 15rpx;
				}
			}
		}
	}

	.user-middle {
		margin-top: 30rpx;
		width: 690rpx;
		height: 160rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background: #fff;
		position: relative;

		image {
			width: 690rpx;
			height: 160rpx;
			position: absolute;
			top: 0%;
		}

		.i {
			width: 690rpx;
			height: 160rpx;
			position: absolute;
			top: 0%;
			padding: 22rpx 28rpx;
			box-sizing: border-box;

			.btn {
				position: absolute;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #3191ff;
				right: 38rpx;
			}

			.m {
				font-size: 68rpx;

				.t1 {
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.texst {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #d1d1d6;
			}
		}
	}

	.user-top {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			height: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
			text-align: center;
			margin-top: 20rpx;
			border: none;
			background-color: transparent;
			padding: 0;

			&::after {
				display: none;
			}
		}

		.tel {
			margin-top: 10rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #333;
			text-align: center;
			border: none;
			background-color: transparent;
			padding: 0;

			&::after {
				display: none;
			}
		}

		.tel2 {
			margin-top: 10rpx;
			width: 200rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			border-radius: 26rpx;
			color: #fff;
			font-size: 28rpx;
			background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}
}
</style>
